<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>


<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <base href="<%=basePath%>">
    
    <title>realData</title>
	<jsp:include page="../analysisInclude.jsp"></jsp:include>
	<style type="text/css">
	</style>
</head>
<body>
	
<!-- 	<div>
	  <ul class="nav nav-tabs" role="tablist">
	    <li id="dypd" role="presentation" class="active" style="width: 50%;"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">低压配电房</a></li>
	    <li id="fdj" role="presentation" style="width: 50%;"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">发电机房</a></li>
	  </ul>
	  Tab panes
	  <div class="tab-content">
	    <div role="tabpanel" class="tab-pane active" id="home">
	        <div id="bottonBar"></div>
	    	<div id="container" style="width: 1000px;height:700px;"></div>
	    	<div class="table-responsive">
	    		<table class="table table-bordered" id="mainTable">
						<tr><th>数据名称</th><th>数据（单位）</th></tr>
	    		</table>
			</div>
	    </div>
	    <div role="tabpanel" class="tab-pane" id="profile">
	    </div>
	  </div>
	</div> -->
	
    <div class="container-fluid">
	  <div class="row">
	  	<div class="col-xs-6"><div id="container" style="margin-left: -100px;"></div></div>
	  	<div class="col-xs-3"></div>
		<div class="col-xs-3" id="textDiv"></div>
		<div class="col-xs-12"><div id="lineContainer"></div></div>
	  </div>
	</div>
	<input type="hidden" id="ProjectCode" value="${ProjectCode}"/>
	<input type="hidden" id="DeviceID" value="${DeviceID}"/>

    <script type="text/javascript">
    var path = "<%=path%>";
    var ProjectCode = $('#ProjectCode').val();
    var DeviceID = $('#DeviceID').val();
    var collectDataArrary = new Array();
    var InitDate = "";
    
    $(function () {
    	
    	InitDate = dateFormatter(new Date());
    	
    	//设备监控实时数据初始化
    	getDeviceRealData(ProjectCode,DeviceID);
    	
    	//能耗数据监控初始化
   		getDeviceEnergy(ProjectCode,DeviceID,InitDate);
		 
/*           $.ajax({
		        type : "post",
		        url: "http://202.105.104.105:8804/device/get?AccessToken=bd4f1ce1b544463094726ebc23a6c9f1",
		        async:true,
		        data:{
		          'ProjectCode':"201"
		        },
		        dataType: 'json',
		        success: function(data){
		        	   var count = 0;
		               $.each(data.data,function(i,item){
		            	   if(item.NavName=='低压配电房'){
		            		      //count ++;      		      
		            		   	  $("#bottonBar").append('<button name="deviceBtn" id="deviceBtn" class="btn btn-primary"  value="'+item.DeviceID+'">' + item.DeviceName + '</button>'); 
		            	   }
		        	    });
		        	    //$("#dypd").text('低压配电房'+count)
		             },
		        error:function(){
		               console.log("服务中断");
		        }
		      }) */

	});
    
    function dateFormatter(value) {
    	var date = new Date(value);
    	var Y= date.getFullYear() + '-';
    	var M = (date.getMonth()+ 1) < 10 ?'0'+ (date.getMonth()+1) + '-':(date.getMonth()+1)+'-';
    	var D = date.getDate()< 10 ?'0' +  date.getDate(): date.getDate();
    	return Y+M+D;
    }
 	
/*  	$("#bottonBar").on("click","button",function() {
 		var deviceId = $(this).val();
 		//console.log(deviceId);
 		getDeviceRealData(deviceId);
 	 }); */

 	//获得设备监控实时数据
 	function getDeviceRealData(projectId,deviceId){
        $.ajax({
	        type : "post",
	        url: "http://202.105.104.105:8804/realdata/get?AccessToken=bd4f1ce1b544463094726ebc23a6c9f1",
	        async:true,
	        data:{
	          'ProjectCode':projectId,
	          'DeviceID':deviceId
	        },
	        dataType: 'json',
	        success: function(data){
				  var arrayA = new Array();
				  var arrayV = new Array();
			      $.each(data.data,function(i,item){
			    	  if((item.DataName =='功率因数')|| (item.DataName =='视在功率')){
			    		  $("#textDiv").append('<div class="col-xs-12 "><div class="thumbnail"><div class="caption"><h4>'+ item.CollectData +'</h4><p>'+ item.DataName +'</p></div></div></div>');
			    	  }else if((item.DataName =='A相电流')|| (item.DataName =='B相电流')|| (item.DataName =='C相电流')){
			    		  arrayA.push(item.CollectData+'</br>');
			    	  }else if((item.DataName =='A相电压')|| (item.DataName =='B相电压')|| (item.DataName =='C相电压')){
			    		  arrayV.push(item.CollectData+'</br>');
			    	  }
			    	  
	    	      })
	    	      
	    	      $("#textDiv").append('<div class="col-xs-12 "><div class="thumbnail"><div class="caption"><h4>'+ arrayA.join(' ') +'</h4><p>三相电流</p></div></div></div>');
			      $("#textDiv").append('<div class="col-xs-12"><div class="thumbnail"><div class="caption"><h4>'+ arrayV.join(' ') +'</h4><p>三相电压</p></div></div></div>');
	    	      
	    		  setTimeout(function () {//间隔50m拉取数据*
	    			  setData(data.data);
		  	      }, 50);

	             },
	        error:function(){
	               console.log("服务中断");
	        }
	      })
 	}
 	 
 	//获得能耗数据监控
    function getDeviceEnergy(ProjectCode,DeviceID,date){
         $.ajax({
 	        type : "post",
 	        url: "http://202.105.104.105:8804/energy/get?AccessToken=bd4f1ce1b544463094726ebc23a6c9f1",
 	        async:true,
 	        data:{
 	          'ProjectCode':ProjectCode,
 	          'DeviceID':DeviceID,
 	          'Date':date
 	        },
 	        dataType: 'json',
 	        success: function(data){
 			      var collectTimeArrary = new Array();
 			      var jsonDataArrary = new Array();
 	              $.each(data.data,function(i,item){
 	            	   //console.log(item);
 	            	   var time = item.CollectTime;
 	            	   collectTimeArrary.push(time.slice(11,19));
 	            	   jsonDataArrary.push(item.CollectData);
 	        	  });
 	               
 				  setTimeout(function () {
 			            fetchData(collectTimeArrary,jsonDataArrary);
 			      }, 50); 
 	         },
 	        error:function(){
 	               console.log("服务中断");
 	        }
 	      })
     }
 	 
 	 /********************** echart 仪表盘*****************************/
     var myChart = echarts.init(document.getElementById('container'));
    
	 option = {
		grid:{
            left:100
        },
	    tooltip : {
	        formatter: "{a} <br/>{b} : {c}%"
	    },
	    series: [
	        {
	            name: '监控',
	            type: 'gauge',
                title:{
                	fontSize:'18',
                    color:'#379a38'
                },
	            detail: {formatter:'{value}%'}
	        }
	    ]
	 };
	
    function setData(jsonData) {
   	 //console.log(jsonData)
   	 var resultJson1 = "";
   	 var resultJson2 = "";
   	 
       $.each(jsonData,function(i,item){
   		 if(item.DataName == '负载率'){
   			 resultJson1 = item.CollectData;
	   		  }else if((item.DataName == '运行状态')&&(item.CollectData == '1')){
	   			 item.CollectData = "正常";
	   			 resultJson2 = item.CollectData;
	   		  }
	    })
   	 
	    var obj = {"name":resultJson2,"value":resultJson1};
		collectDataArrary.push(obj);
   	 
        myChart.setOption({
       	    title: {
    	        text: "设备实时监控",//jsonData[0].DeviceName,
    	        subtext: InitDate,
                textStyle: {
                	fontSize: '28'
                },
                subtextStyle: {
                	fontSize: '20'
                },
    	        x: "center"
    	    },
            series: [{
                name: '监控',
                data: collectDataArrary
            }]
        });
	 }
	
	/*  	setInterval(function () {
	    option.series[0].data[0].value = 30;
	    myChart.setOption(option, true);
	},2000);  */
	
	 myChart.setOption(option);
	/********************** echart 仪表盘    end*****************************/
	
	/****************************echart ********************************/
    var dom = document.getElementById("lineContainer");
    var myChartLine = echarts.init(dom);
    var app = {};
    optionLine = null;
    
    function fetchData(collectTimeArrary,jsonDataArrary) {
    	myChartLine.setOption({
	       	    title: {
	    	        subtext: InitDate
	    	    },
                xAxis: {
                    data: collectTimeArrary
                },
                series: [{
                    // 根据名字对应到相应的系列
                    name: '设备逐时能耗',
                    data: jsonDataArrary
                }]
            });

    }
    

    // 初始 option
    optionLine = {
        grid:{
           top:80
        },
        title: {
            text: '设备逐时能耗',
            textStyle: {
            	fontSize: '28'
            },
            subtextStyle: {
            	fontSize: '20'
            },
            x: "center"
        },
        tooltip: {
        	trigger: 'axis'
        },
        legend: {},
        dataZoom: [{
            type: 'inside',
            realtime: true,
            start: 50,
            end: 100
        }],
        xAxis: {
            data: [],
            axisLabel: {        
                textStyle: {
                    fontSize:'20'
                }
            }
        },
        yAxis: {
        	name : 'kw.h',
        	nameTextStyle: {
        		fontSize:16
        	},
            axisLabel: {        
                textStyle: {
                    fontSize:'20'
                }
            }
/*             axisLine:{
            	show:false
            } */
        },
        series: [{
            name: '设备逐时能耗',
            type: 'line',
            data: []/* ,
            lineStyle:{
            	normal:{
            		color:'#ffffff'
            	}
            } */
        }]
    };

    if (optionLine && typeof optionLine === "object") {
    	myChartLine.setOption(optionLine, true);
    } 
    /******************** echart end*****************************/


    </script>
</body>
</html>